<template>
  <section v-loading="loading">
    <div class="manage-withdrawal-content">
      <div class="user-head">
        <el-form inline>
          <el-form-item>
            <el-select
              v-model="searchForm.srch_type"
              clearable
              placeholder="查询项目"
            >
              <el-option label="昵称" value="昵称" />
              <el-option label="电话号码" value="电话号码" />
              <el-option label="姓名" value="姓名" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.status" clearable placeholder="状态">
              <el-option label="失败" :value="0" />
              <el-option label="待审核" :value="1" />
              <el-option label="已审核" :value="2" />
              <el-option label="打款中" :value="3" />
              <el-option label="已打款" :value="4" />
              <el-option label="已收款" :value="5" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input style="width: 100%" placeholder="处理记录" />
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.code"
              placeholder="提现单号"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="searchForm.start_time"
              type="datetime"
              placeholder="注册开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="searchForm.end_time"
              type="datetime"
              placeholder="注册结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>

          <el-form-item>
            <div style="white-space: nowrap">
              <el-button type="primary" @click="searchFun">查询</el-button>
              <el-button @click="resetFun">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="coupon-table">
        <el-table
          border
          stripe
          :data="tableData"
          :height="store.tableHeight - 50"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="用户信息" width="250">
            <template #default="{ row }">
              <div class="manage-info">
                <el-image
                  :preview-teleported="true"
                  style="width: 50px; min-width: 50px; height: 50px"
                  :src="imgSrc(row?.user?.headimg)"
                  :zoom-rate="1.2"
                  :preview-src-list="[imgSrc(row?.user?.headimg)]"
                  :initial-index="4"
                  fit="cover"
                  class="img-box"
                />
                <div class="right">
                  <div>
                    <span>{{ row?.user?.nickname }} </span>
                  </div>
                  <div>
                    <span>{{ row?.user?.realname }} </span>
                  </div>
                  <div>
                    <span>{{ row?.user?.phone }} </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="code" label="提现单号"> </el-table-column>
          <el-table-column prop="amount" label="提现金额(元)">
          </el-table-column>
          <el-table-column prop="charge_amount" label="提现手续费(元)">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="90">
            <template #default="{ row }">
              <el-tag v-if="row.status == 0" type="danger"> 失败 </el-tag>
              <el-tag v-else-if="row.status == 1" type="warning">
                待审核
              </el-tag>
              <el-tag v-else-if="row.status == 2"> 已审核 </el-tag>
              <el-tag v-else-if="row.status == 3" type="success">
                打款中
              </el-tag>
              <el-tag v-else-if="row.status == 4"> 已打款 </el-tag>
              <el-tag v-else-if="row.status == 5"> 已收款 </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="处理记录">
            <template #default="{ row }">
              <div style="font-size: 12px" v-if="row.change_time">
                处理时间：{{ row.change_time }}
              </div>
              <div style="font-size: 12px" v-if="row.audit_datetime">
                审核时间： {{ row.audit_datetime }}
              </div>
              <div style="font-size: 12px" v-if="row.trade_time">
                打款时间： {{ row.trade_time }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="140"
            align="center"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button
                type="primary"
                v-if="row.status == 1"
                link
                @click="bindOpen(1, row)"
              >
                审核
              </el-button>
              <el-button
                v-if="row.status == 1"
                type="danger"
                link
                @click="bindOpen(0, row)"
              >
                拒绝
              </el-button>
              <el-button
                v-if="row.status == 2"
                type="success"
                link
                @click="delFun(row)"
              >
                确认打款
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-div">
          <div></div>
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div></div>
        </div>
      </div>
    </div>
  </section>
  <dialogPage ref="dialogPage1Ref" @refreshList="refreshList" />
  <dialogPage2 ref="dialogPage2Ref" @refreshList="refreshList" />
</template>
<script setup>
import { listApi } from "@/plugins/api/shopping/withdrawal";
import { useCounterStore } from "@/stores/counter.js";
import dialogPage from "./components/DialogWithdrawal-1.vue";
import dialogPage2 from "./components/DialogWithdrawal-2.vue";
const store = useCounterStore();
let searchForm = ref({});

//
let tableData = ref([]);
let selectData = ref([]);
let loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  selectData.value = [];
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  selectData.value = [];
  getData();
};

function searchFun() {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}
function resetFun() {
  currentPage.value = 1;
  searchForm.value = {};
  tableData.value = [];
  selectData.value = [];
  getData();
}
function refreshList() {
  getData();
}
function getData() {
  loading.value = true;
  let obj = Object.assign(
    {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
    searchForm.value
  );

  listApi(obj)
    .then((data) => {
      tableData.value = data.list.map((item) => {
        return item;
      });
      total.value = data.page.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
function handleSelectionChange(val) {
  selectData.value = val;
}
function delAllFun() {
  ElMessageBox.confirm("确认批量删除选中的数据，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let arr = selectData.value.map((ele) => {
        return ele.id;
      });
      delApi({
        id: arr.join(","),
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        selectData.value = [];
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
function tabChange(name) {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}
function imgSrc(path) {
  return import.meta.env.VITE_APP_BASE_API + path;
}
// 详情
let dialogPage1Ref = ref(null);
function bindOpen(type, row) {
  dialogPage1Ref.value.initFun(type, row);
}

// 发货
let sendPageRef = ref(null);
function sendOrder(row) {
  ElMessageBox.confirm("确认冻结，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi({
        id: row.id.toString(),
      }).then(() => {
        ElMessage({
          type: "success",
          message: "冻结成功！",
        });
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
// 确认打款
let dialogPage2Ref = ref(null);
function delFun(row) {
  dialogPage2Ref.value.initFun(row);
}

//
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.manage-withdrawal-content {
  width: 100%;
  padding: 10px;
  height: calc(100% - 40px);
  overflow: hidden;
  box-sizing: border-box;

  .user-head {
    :deep(.el-form-item) {
      margin-right: 10px;
      width: calc(100% / 9);
    }
  }

  .pagination-div {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .manage-info {
    display: flex;

    .img-box {
      align-self: center;
    }

    .right {
      margin-left: 10px;
      align-self: center;

      span {
        color: #409eff;
      }
    }
  }
}
</style>
